Chapter 14: Create Navigation Header Bar

Let ’ s add a navigation header bar which allows a user to select different routes to access different components in

the main part of the page. We will start by creating some simple components and our router will load the different

components depending on the URL route a user selects.

Let ’ s first create a components folder in src (fig. 1).

Figure 1

In the components folder, we will create four new component files:

todos-list.js – a component to list todos

add-todo.js – component to add a todo

login.js – login component

signup.js – sign up component

Let ’ s first have a simple boilerplate code for each component:

todos-list.js

Add Code

import React from 'react';

function TodosList() {

return (

<div className="App">

Todos List

</div>

);

}

export default TodosList;

add-todo.js

Add Code

import React from 'react';

function AddTodo() {

return (

<div className="App">

Add Todo

</div>

);

}

export default AddTodo;

login.js

Add Code

import React from 'react';

function Login() {

return (

<div className="App">

Login

</div>

);

}